<template>
  <div class="salesAnalysis">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>类目支付金额占比</span>
          </div>
          <div>
            <DiskChart
              class="goods"
              :dataList="loadData2"
              :dataValue="loadDataValue"
              :totalSales="totalSales"
              width="100%"
              height="600px"
              v-if="show"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>分类支付金额</span>
          </div>
          <div>
            <avue-crud
              ref="crud1"
              style="width:100%"
              :data="loadData1"
              :option="tableOption1"
              :table-loading="loading1"
            ></avue-crud>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>商品销量榜</span>
          </div>
          <div>
            <avue-crud
              ref="crud3"
              style="width:100%"
              :data="loadData3"
              :option="tableOption3"
              :table-loading="loading1"
            ></avue-crud>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>商品营收榜</span>
          </div>
          <div>
            <avue-crud
              ref="crud4"
              style="width:100%"
              :data="loadData4"
              :option="tableOption4"
              :table-loading="loading1"
            ></avue-crud>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import DiskChart from "@/components/dashboard/DiskChart.vue";
import { tableOption1, tableOption3, tableOption4 } from "./index.config.js";
import { dataCenterGoodsInfo } from "@/api/shop/dataReport/goodsData.js";

export default {
  components: {
    DiskChart,
  },
  data() {
    return {
      tableOption1,
      tableOption3,
      tableOption4,
      loadData1: [],
      loadData2: [],
      loadDataValue: [],
      loadData3: [],
      loadData4: [],
      loading1: false,

      totalSales: `${0}\n\n总销量`, //总销量
      show:false
    };
  },
  methods: {
    getList(searchForm, page) {
      if (searchForm) {
        console.log(searchForm);
        this.searchForm = searchForm;
      }
      this.loading1 = true;
      this.show = false
      dataCenterGoodsInfo(Object.assign({}, this.searchForm)).then((val) => {
        let data = val.data.data;
        this.loading1 = false;
        if (data.typeIdAmtList[0] != null ) {
          this.loadData2 = [];
          this.loadDataValue = [];
          var num = 0;
          data.typeIdAmtList.forEach((item) => {
            this.loadData2.push(item.category);
            this.loadDataValue.push({
              value: item.amt,
              name: item.category,
            });
            // num += parseInt(item.amt);
            num = item.allAmt
          });
          this.totalSales = `${num?num:0}\n\n总销量`;
          console.log(this.loadData2);
          this.show = true
        }else{
          this.show = false
        }

        this.loadData1 = data.cateIdAmtList;
        this.loadData3 = data.salesList;
        this.loadData4 = data.revenueList;
      });
    },
  },
};
</script>
<style lang="scss">
.salesAnalysis {
  .box-card {
    min-height: 500px;
  }
}
</style>